<template>
    <div class="side-bar" :class="mobileShow ? 'mobile' : ''">
        <div class="blog-name text-center">
                <div>阿炸克斯</div>
            <div>
                <small v-if="$root.login.isLogin" @click="quitFn">退出</small>
                <template v-else>
                    <small @click="$root.login.show = true, $root.login.loginView = true">登录</small>
                    <!--<small @click="$root.login.show = true, $root.login.loginView = false">注册</small>-->
                </template>
            </div>
        </div>
        <ul class="menu" @click="mobileHide">
            <router-link tag="li" to="/"><i class="iconfont icon-iconfonthome0"></i><span>首页</span></router-link>
            <router-link tag="li" to="/tag"><i class="iconfont icon-biaoqian"></i><span>标签</span></router-link>
            <router-link tag="li" to="/article"><i class="iconfont icon-sousuo1"></i><span>搜索</span></router-link>
        </ul>
        <div class="user-info" v-if="userinfo" @click="routerAdminFn">
            <div class="img"><img :src="userinfo.headImg" alt=""></div>
            <div class="name text-center">{{userinfo.name}}</div>
            <div class="summary">{{userinfo.ones}}</div>
        </div>
        <ul class="column" @click="mobileHide">
            <router-link to="/article" tag="li">
                <div class="num">{{count.article}}</div>
                <div class="title">日志</div>
            </router-link>
            <router-link to="/tag" tag="li">
                <div class="num">{{count.tag}}</div>
                <div class="title">标签</div>
            </router-link>
            <!--<li>-->
            <!--<div class="num">0</div>-->
            <!--<div class="title">说说</div>-->
            <!--</li>-->
        </ul>
        <div class="friend-link">
            <a target="_blank" href="https://github.com/lvyueyang">
                <i class="iconfont icon-GitHub"></i>
                GitHub
            </a>
            <a target="_blank" href="https://juejin.im/user/585407be61ff4b0063af58be">
                <i class="iconfont icon-juejin"></i>
                掘金
            </a>
        </div>
    </div>
</template>

<script>
    export default {
        name: 'SideBar',
        props: {
            mobileShow: {
                type: Boolean,
                default: false
            }
        },
        data() {
            return {
                left: 0
            }
        },
        computed: {
            userinfo() {
                return this.$root.userinfo
            },
            count() {
                return this.$root.countNumber
            }
        },
        async created() {
        },
        methods: {
            // 用于设置左边距，未启用
            setBarLeft() {
                this.$nextTick(() => {
                    const appDom = document.getElementById('app')
                    const marginL = appDom.offsetLeft
                    this.left = marginL + 'px'
                })
            },
            quitFn() {
                this.$pop.confirm({
                    content: '确定要退出吗？',
                    ok: async () => {
                        localStorage.setItem('token', '')
                        // await this.$http.post('/v1/signOut')
                        window.location.reload()
                    }
                })
            },
            routerAdminFn() {
                if (this.$root.login.isLogin) {
                    this.$router.push('/admin')
                    this.mobileHide()
                }
            },
            mobileHide() {
                this.$emit('linkClick')
            }
        }
    }
</script>
